<template>
  <a-layout class="bgc-white">
    <a-row>
      <div class="template-title">员工字段设置</div>
    </a-row>
    <div class="boxBack">员工字段设置</div>
    <a-row :gutter="24">
      <a-col :span="8" @click="goTemplate(item)" v-for="(item, index) in fieldsData" :key="index" class="mt24">
        <div class="gutter-row border pointer ph12" style="display: flex">
          <div class="gutter-item" style="width: 80px; height: 80px; flex-shrink: 0; margin-right: 12px">
            <img :src="item.url" alt />
          </div>
          <div class="pt54 pointer" style="flex: 1">{{ item.title }}</div>
        </div>
      </a-col>
    </a-row>
    <div class="boxBack mt24">入职模板设置</div>
    <a-row class="gutter-box" style="margin-top: 5px" :gutter="24">
      <a-col :span="8" @click="goTemplate(item)" v-for="(item, index) in fieldsData1" :key="index" class="mt24">
        <div v-if="index !== 2" :class="index === 2 ? '' : 'border'" class="gutter-row pointer ph12" style="display: flex">
          <div class="gutter-item" style="width: 80px; height: 80px; flex-shrink: 0; margin-right: 12px">
            <img :src="item.url" alt />
          </div>
          <div class="pt54 pointer" style="flex: 1">{{ item.title }}</div>
        </div>
      </a-col>
    </a-row>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      fieldsData1: [
        {
          title: "入职模板设置",
          url: require("@/assets/icons/ruzhi1.png"),
          type: "4",
          mark: "entryTemplateSet"
        },
        {
          title: "待入职模板设置",
          url: require("@/assets/icons/dairuzhi.png"),
          type: "5",
          mark: "hiredEntryTemplateSet"
        }
      ],
      fieldsData: [
        {
          title: "个人信息设置",
          url: require("@/assets/icons/personal.png"),
          type: "1",
          mark: "personalInfo"
        },
        {
          title: "在职信息设置",
          url: require("@/assets/icons/personal.png"),
          type: "4",
          mark: "zaizhixinxi"
        },
        {
          title: "工资社保设置",
          url: require("@/assets/icons/salary.png"),
          type: "2",
          mark: "socialSecurity"
        },
        {
          title: "材料附件设置",
          url: require("@/assets/icons/enclosure.png"),
          type: "3",
          mark: "information"
        }
      ]
    };
  },
  methods: {
    goTemplate(data) {
      if (JSON.stringify(data) !== "{}") {
        this.$router.push({ path: `/staff/${data.mark}/${data.type}` });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.template-title {
  font-size: 16px;
  color: #252525;
  padding: 37px 0 13px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid #d7d7d7;
}

.gutter-row {
  height: 132px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
}
.gutter-item {
  margin-top: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  i {
    font-size: 30px;
    color: #fff;
    padding-top: 15px;
  }
  img {
    width: 80px;
    height: 80px;
  }
}
.border {
  border: 1.5px solid rgba(215, 215, 215, 1);
}
.boxBack {
  height: 48px;
  background: #fafafa;
  line-height: 48px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #252525;
  padding-left: 24px;
}
</style>
